<template>
	<div class="tinymce-editor">
		<editor v-if="!reloading" v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick">
		</editor>
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce'
	import Editor from '@tinymce/tinymce-vue'
	import 'tinymce/themes/silver/theme'
	import 'tinymce/plugins/image'
	import 'tinymce/plugins/link'
	import 'tinymce/plugins/media'
	import 'tinymce/plugins/table'
	import 'tinymce/plugins/lists'
	import 'tinymce/plugins/contextmenu'
	import 'tinymce/plugins/wordcount'
	import 'tinymce/plugins/colorpicker'
	import 'tinymce/plugins/textcolor'
	import 'tinymce/plugins/fullscreen'
	import 'tinymce/icons/default'
	import {
		uploadAction,
		postAction,
		getFileAccessHttpUrl
	} from '@/api/manage'
	import {
		getVmParentByName
	} from '@/utils/util'
	export default {
		components: {
			Editor
		},
		props: {
			value: {
				type: String,
				required: false
			},
			triggerChange: {
				type: Boolean,
				default: false,
				required: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			plugins: {
				type: [String, Array],
				default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
			},
			toolbar: {
				type: [String, Array],
				default: 'undo redo |  formatselect  |  forecolor  fontsizeselect | fontselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
				branding: false
			}
		},
		data() {
			return {
				//初始化配置
				init: {
					language_url: '/tinymce/langs/zh_CN.js',
					language: 'zh_CN',
					skin_url: '/tinymce/skins/lightgray',
					height: 300,
					plugins: this.plugins,
					toolbar: this.toolbar,
					branding: false,
					menubar: false,
					toolbar_drawer: false,
					fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt",
					images_upload_handler: (blobInfo, success) => {
						let formData = new FormData()
						formData.append('file', blobInfo.blob(), blobInfo.filename());
						formData.append('biz', "jeditor");
						formData.append("jeditor", "1");
						postAction(window._CONFIG['domianURL'] + "/app/utils/aliOssUpload", formData).then((res) => {
							if (res.success) {
								// if (res.message == 'local') {
								// 	const img = 'data:image/jpeg;base64,' + blobInfo.base64()
								// 	success(img)
								// } else {
								// 	let img = getFileAccessHttpUrl(res.message)
								// 	success(img)
								// }
								// let img = getFileAccessHttpUrl(res.message)
								success(res.message)
							}
						})
					}
				},
				myValue: this.value,
				reloading: false,
			}
		},
		mounted() {
			this.initATabsChangeAutoReload()
		},
		methods: {

			reload() {
				this.reloading = true
				this.$nextTick(() => this.reloading = false)
			},

			onClick(e) {
				this.$emit('onClick', e, tinymce)
			},
			//可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = ''
			},

			/**
			 * 自动判断父级是否是 <a-tabs/> 组件，然后添加事件监听，自动触发reload()
			 *
			 * 由于 tabs 组件切换会导致 tinymce 无法输入，
			 * 只有重新加载才能使用（无论是vue版的还是jQuery版tinymce都有这个通病）
			 */
			initATabsChangeAutoReload() {
				// 获取父级
				let tabs = getVmParentByName(this, 'ATabs')
				let tabPane = getVmParentByName(this, 'ATabPane')
				if (tabs && tabPane) {
					// 用户自定义的 key
					let currentKey = tabPane.$vnode.key
					// 添加事件监听
					tabs.$on('change', (key) => {
						// 切换到自己时执行reload
						if (currentKey === key) {
							this.reload()
						}
					})
					//update--begin--autor:liusq-----date:20210316------for：富文本编辑器tab父组件可能导致的赋值问题------
					this.reload()
					//update--end--autor:liusq-----date:20210316------for：富文本编辑器tab父组件可能导致的赋值问题------
				} else {
					//update--begin--autor:wangshuai-----date:20200724------for：富文本编辑器切换tab无法修改------
					let tabLayout = getVmParentByName(this, 'TabLayout')
					tabLayout.excuteCallback(() => {
						this.reload()
					})
					//update--begin--autor:wangshuai-----date:20200724------for：文本编辑器切换tab无法修改------
				}
			},

		},
		watch: {
			value(newValue) {
				this.myValue = (newValue == null ? '' : newValue)
			},
			myValue(newValue) {
				if (this.triggerChange) {
					this.$emit('change', newValue)
				} else {
					this.$emit('input', newValue)
				}
			}
		}
	}
</script>
<style scoped>
</style>
